<template>
	<section>
		<form class="form-inline mb20">
			<div>
				<div class="form-group ">
					<label >国家</label>
					<input class="form-control" v-model="param.countryId" />
				</div>
				<div class="form-group ">
					<label >城市</label>
					<input class="form-control" v-model="param.cityId" />
				</div>
				<div class="form-group ml10">
					<label >景点活动</label>
					<input class="form-control" v-model="param.spotsName" />
				</div>
				<div class="form-group ml10">
					<button class="btn btn-success" @click.stop="queryDatas()">查询</button>
					<button class="btn btn-success" @click.stop="scenicAdd()">新增</button>
				</div>
			</div>
		</form>
		<div class="search-result">
		    <table class="table table-striped jambo_table table-bordered">
		        <thead>
		        <tr>
		            <th class="text-center" width="50">ID</th>
		            <th class="text-center" width="120">景点活动名称</th>
		            <th class="text-center" width="120">英文名称</th>
		            <th class="text-center" width="80">国家</th>
		            <th class="text-center" width="80">城市</th>
		            <th class="text-center" width="80">经度</th>
		            <th class="text-center" width="100">纬度</th>
		            <th class="text-center" width="100">开放时间</th>
		            <th class="text-center" width="80">游玩时长</th>
		            <th class="text-center" width="200">地址</th>
		            <th class="text-center">景点活动介绍</th>
		            <th class="text-center" width="140">操作</th>
		        </tr>
		        </thead>
		        <tbody>
		            <tr v-if="dataList == undefined || dataList.length == 0"><td colspan=12  class="text-center">无数据</td></tr>
		            <tr v-for="item in dataList">
		               <td class="text-center">{{item.id}}</td>
		               <td class="text-center">{{item.spotsName}}</td>
		               <td class="text-center">{{item.spotNameEn}}</td>
		               <td class="text-center">{{item.countryId}}</td>
		               <td class="text-center">{{item.cityId}}</td>
		               <td class="text-center">{{item.longitude}}</td>
		               <td class="text-center">{{item.latitude}}</td>
		               <td class="text-center">{{item.openTime}}</td>
		               <td class="text-center">{{item.playTime}}</td>
		               <td class="text-center">{{item.address}}</td>
		               <td>{{item.spotsIntroduction}}</td>
		               <td class="text-center">
		                   <button type="button" class="btn btn-primary fz-12" ng-click="modifyHandle($index)">修改</button>
		                   <button type="button" class="btn btn-primary fz-12" ng-click="deleteHandle($index)">删除</button>
		                   <button type="button" class="btn btn-primary fz-12" >日志</button>
		               </td>
		           </tr>
		        </tbody>
		    </table>
		    <my-pagination ref="page" @renderdata="renderData" :len="len" :url="url" :param="param"></my-pagination>
		</div>
	</section>
</template>
<script>
	import myPagination from "../public/pagination.vue";
	export default {
		components:{myPagination},
		methods:{
			load(){
				alert();
			},
			renderData(res){
				this.dataList = res;
			},
			queryDatas(){
				this.$refs.page.refresh();
			},
			scenicAdd(){

			}
		},
		data(){
			return{
				len:2,//每页显示数量
				url: 'travel_helper/querySpots', // 请求路径
				param:{},
				dataList:[]// 分页组件传回的分页后数据
			}
		}
	} 
</script>